
<template>
  <div class="app-container">
    <el-form :inline="true" :model="searchParam" class="demo-form-inline">
      <el-form-item label="名称">
        <el-input v-model="searchParam.name" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fetchData()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addRowVisible()">添加</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="path"
      border
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column prop="id" label="编号" />
      <el-table-column prop="name" label="迭代" />
      <el-table-column prop="created" label="日期" />
      <el-table-column prop="business_name" label="业务线" />
      <el-table-column prop="env_name" label="环境" />
      <el-table-column prop="service_count" label="服务数" />
      <el-table-column prop="status" label="状态" />
      <el-table-column prop="creator" label="申请者" />
      <el-table-column fixed="right" label="操作" width="220">
        <template #default="scope">
          <el-button type="small"><router-link :to="{ name: 'MultiDeployDetail', query: { id: scope.row.id }}">详情</router-link></el-button>
          <!-- <router-link :to="{ name: 'ProductPerm', params: { id: scope.row.id }}"><el-button type="small">权限</el-button></router-link> -->

        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        ref="pagination"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="tablePageSize"
        :current-page="tablePage"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableTotal"
        prev-text="上一页"
        next-text="下一页"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </div>
    <el-dialog :visible.sync="dialogFormVisible" title="">
      <el-form ref="form" :model="form">
        <el-form-item
          label="迭代"
          :label-width="formLabelWidth"
          prop="name"
          :rules="[
            { required: true, message: '迭代不能为空'}
          ]"
          style="width: 50%"
        >
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item
          label="业务线"
          :label-width="formLabelWidth"
          prop="business_id"
          :rules="[
            { required: true, message: '业务线不能为空'}
          ]"
        >
          <el-select v-model="form.business_id" placeholder="请选择">
            <el-option
              v-for="item in businesslist"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          label="工单类型"
          :label-width="formLabelWidth"
          prop="order_type"
          :rules="[
            { required: true, message: '类型不能为空'}
          ]"
        >
          <el-radio-group v-model="form.order_type">
            <el-radio-button label="update">更新</el-radio-button>
            <el-radio-button label="restart">重启</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="环境"
          :label-width="formLabelWidth"
          prop="env_id"
          :rules="[
            { required: true, message: '环境不能为空'}
          ]"
        >
          <el-radio-group v-model="form.env_id">
            <el-radio-button
              v-for="item in envlist"
              :key="item.id"
              :label="item.id"
              :value="item.id"
            >{{ item.name }}</el-radio-button>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addRowHandle('form')">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { getList, addRow } from '@/api/flow/multideploy'
import { getList as getBusiness } from '@/api/resource/business'
import { getList as getEnv } from '@/api/resource/env'

export default {
  data() {
    return {
      tableData: [],
      tablePageSize: 10,
      tablePage: 1,
      tableTotal: 0,
      listLoading: true,
      searchParam: {
        code: '',
        name: ''
      },
      dialogFormVisible: false,
      form: { order_type: 'update', 'name': '' },
      formLabelWidth: '120px',
      businesslist: [],
      envlist: []
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    initForm() {
      const today = new Date().toISOString().slice(0, 10)
      this.form.name = '迭代' + today
    },
    fetchData() {
      this.listLoading = true
      const params = Object.assign(this.searchParam, { 'page': this.tablePage, 'page_size': this.tablePageSize })
      getList(params).then(response => {
        this.tableData = response.data
        this.tableTotal = response.total
        this.listLoading = false
      })
    },
    fetchBusiness() {
      getBusiness().then(response => {
        this.businesslist = response.data
      })
    },
    fetchEnv() {
      getEnv().then(response => {
        this.envlist = response.data
      })
    },
    handleCurrentChange(page) {
      this.tablePage = page
      console.log(page, this.tablePageSize)
      this.fetchData()
    },
    handleSizeChange(pagesize) {
      this.tablePageSize = pagesize
      this.fetchData()
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    addRowVisible() {
      // 解决form缓存问题
    //   this.form = {}
      this.initForm()
      this.fetchBusiness()
      this.fetchEnv()
      this.dialogFormVisible = true
    },
    addRowHandle(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.dialogFormVisible = false
          addRow(this.form).then(response => {
            this.$message({
              type: 'success',
              message: '添加成功'
            })
            this.fetchData()
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style>

</style>
